import React, { useEffect, useState } from 'react'
import { getAdminListFn } from '../../api/user'
import { Table, Button, Tag, Drawer, Input, Select, Tree } from 'antd';
import menus from '../../router/index'

export default function Index() {

    const [adminList, setAdminList] = useState([])

    // 表示的是当前页码
    const [current, setcurrent] = useState(1)

    useEffect(() => {
        getAdminListFn().then(res => {
            console.log(res);
            setAdminList(res.data)
        })
    }, [])


    const columns = [
        {
            title: '序号',
            dataIndex: 'telcode',
            render(text, record, index) {
                return <span>{(current - 1) * 10 + index + 1}</span>
            }
        }, {
            title: '管理员名称',
            dataIndex: 'adminname'
        }, {
            title: '管理员类型',
            dataIndex: 'role',
            render(t, r, i) {
                return (t == 1 ?
                    <Tag color="green">管理员</Tag>
                    :
                    <Tag color="blue">超级管理员</Tag>)
            }
        }, {
            title: '操 作',
            render() {
                return (<>
                    <Button>编辑</Button>
                    <Button>删除</Button>
                </>)
            }
        }
    ]


    // ------------------- 添加管理员 -------------------
    const [open, setopen] = useState(false)



    return (
        <div>
            <h3>
                管理员列表
                &#x3000;
                <Button onClick={() => { setopen(true) }}>添加管理员</Button>
            </h3>


            <Table
                columns={columns}
                dataSource={adminList}
                rowKey={'adminid'}
                scroll={{ y: 500 }}
                pagination={{
                    current,
                    onChange(page) {
                        // 记录当前页
                        setcurrent(page)
                    }
                }} />

            {/* 添加管理员的抽屉组件 */}
            <Drawer title="添加管理员" onClose={() => { setopen(false) }} open={open}>

                <Input placeholder="请输入管理员账号" />
                <Input placeholder="请输入管理员密码" />
                <Select placeholder='请选择管理员类型'>
                    <Select.Option>管理员</Select.Option>
                    <Select.Option>超级管理员</Select.Option>
                </Select>
                <Tree
                    checkable
                    treeData={menus}
                    fieldNames={{ title: 'label' }}
                />
                <Button>添 加</Button>
            </Drawer>
        </div>
    )
}
